<template>
    <div class="app-container">
            <!-- 查询表单 -->
            <el-form :inline="true" class="demo-form-inline">
            <!-- 标题 -->
                <el-form-item>
                    <el-input v-model="searchObj.title" placeholder="幻灯片标题"/>
                </el-form-item>
                
                <el-button type="primary" icon="el-icon-search" @click="getBanner()">查询</el-button>
                <el-button type="default" @click="resetData()">清空</el-button>
            </el-form>
            <!-- 表格 -->
            <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="数据加载中"
            border
            fit
            highlight-current-row
            row-class-name="myClassList">
            <el-table-column
                label="序号"
                width="70"
                align="center">
                <template slot-scope="scope">
                {{ (page - 1) * limit + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="幻灯片信息" width="450" align="center">
                <template slot-scope="scope">
                <div class="info">
                    <div class="pic">
                    <img :src="scope.row.imageUrl" alt="scope.row.title" width="150px">
                    </div>
                    <div class="title">
                    <a href="">{{ scope.row.title }}</a>
                    <!-- <p>{{ scope.row.lessonNum }}课时</p> -->
                    </div>
                </div>
                </template>
            </el-table-column>
            <el-table-column label="排序" align="center">
                <template slot-scope="scope">
                {{ Number(scope.row.sort) }}
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center">
                <template slot-scope="scope">
                {{ scope.row.gmtCreate.substr(0, 10) }}
                </template>
            </el-table-column>
            <el-table-column label="修改时间" align="center">
                <template slot-scope="scope">
                {{ scope.row.gmtCreate.substr(0, 10) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                <!-- <router-link :to="'/edu/course/info/'+scope.row.id"> -->
                    <el-button type="text" size="mini" icon="el-icon-edit" @click="updateBannerInfo(scope.row.id)">编辑幻灯片信息</el-button>
                <!-- </router-link> -->
                <!-- <router-link :to="'/edu/course/chapter/'+scope.row.id"> -->
                    <!-- <el-button type="text" size="mini" icon="el-icon-edit" @click="updateCourseChapterVideo(scope.row.id)">编辑课程大纲</el-button> -->
                <!-- </router-link> -->
                <el-button type="text" size="mini" icon="el-icon-delete" @click="removeBanner(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
            :current-page="page"
            :page-size="limit"
            :total="total"
            style="padding: 30px 0; text-align: center;"
            layout="total, prev, pager, next, jumper"
            @current-change="getBanner"
            />

</div>
</template>
<script>
import banner from '@/api/edu/banner'
export default {
    data(){
        return{
            listLoading: true, // 是否显示loading信息
            total: 0, // 总记录数
            page: 1, // 页码
            limit: 10, // 每页记录数
            // 查询条件
            searchObj:{},
            // 数据列表
            list: null,
        }
    },
    created(){
        // 当页面加载时获取数据
        this.getBanner()
    },
    methods:{
        // 删除图片
        // 删除课程
        removeBanner(id){
                // debugger
            this.$confirm('此操作将永久删除该课程，以及该课程下的章节和视频，是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                return banner.deleteBanner(id)
            }).then(() => {
                this.getBanner(this.page)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                })
            }).catch((response) => { // 失败
                if (response === 'cancel') {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                }
            })
        },
        
        // 调用编辑幻灯片的方法
        updateBannerInfo(id){
            this.$router.push({path:'/banner/edit/' + id})
        },

        // 点击查询调用的语句
        // 得到所有的banner
        getBanner(page = 1){
            this.page = page
            banner.getAllBanner(this.page,this.limit,this.searchObj).then(resp => {
                this.list = resp.data.rows
                this.total = resp.data.total
                // 关闭加载框
                this.listLoading = false
            })
        },
        // 清空按钮
        resetData(){
            this.searchObj = {}
            // 重新查询一下
            this.getBanner()
        },
        
        

    }
}
</script>